<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <title th:text="#{screen.surrogates.account.selection.header}">Surrogate Account Selection View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
</head>

<body>
    <main class="container mt-3 mb-3">
        <div id="content" layout:fragment="content" class="mdc-card card p-4 m-auto w-lg-66">
            <form method="post" id="loginForm">

                <div class="banner banner-danger alert alert-danger" th:if="${flowRequestContext.messageContext.hasErrorMessages()}">
                    <span th:each="message : ${flowRequestContext.messageContext.allMessages}"
                        th:utext="#{${message.text}}">Message Text</span>
                </div>

                <div id="titlePanel" class="my-3">
                    <h2 th:text="#{screen.surrogates.choose.account}">Choose Account</h2>
                    <div id="surrogateInfo" th:utext="#{screen.surrogates.message}">
                        <p>You are provided with a list of accounts on behalf of which you are allowed to authenticate.
                        </p>
                        <p>Select one and continue.</p>
                    </div>
                    <label for="surrogateTarget" class="fl-label">Account:</label>
                    <select name="surrogateTarget" id="surrogateTarget" class="custom-select">
                        <option th:each="surrogate: ${surrogates}" th:value="${surrogate}" th:text="${surrogate}" />
                    </select>
                </div>
                <input type="hidden" name="execution" th:value="${flowExecutionKey}" />
                <input type="hidden" name="_eventId" value="submit" />
                <div class="d-flex">
                    <button class="mdc-button mdc-button--raised btn btn-primary me-2" id="submit" name="submit" accesskey="l"
                        th:value="#{screen.welcome.button.login}" value="Login">
                        <span class="mdc-button__label" th:text="#{screen.welcome.button.login}">Login</span>
                    </button>
                    <a class="mdc-button mdc-button--outline btn btn-outline-secondary button-cancel" id="cancel" name="cancel" th:unless="${service}"
                        th:href="@{/login}">
                        <span class="mdc-button__label" th:text="#{screen.surrogates.button.cancel}">Cancel</span>
                    </a>
                    <a class="mdc-button mdc-button--outline btn btn-outline-secondary" id="login" name="login" th:if="${service}"
                        th:href="${service.id}">
                        <span class="mdc-button__label" th:text="#{screen.error.page.loginagain}">Login</span></a>
                </div>
            </form>
        </div>
</body>

</html>
